<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="tab">
        <div class="list">
            <ul>
                <li class="current">第一节课</li>
                <li>第二节课</li>
                <li>点三节课</li>
            </ul>
        </div>
        <div class="con">
            <div class="item" style="display: block;">
                其二房东说宫格
            </div>
            <div class="item">
                梵蒂冈发给
            </div>
            <div class="item">  
                多少功夫22
            </div>

        </div>
    </div>
</body>

</html>
<style>
    li {
        list-style: none;
    }

    .tab {
        width: 978px;
        margin: 100px auto;
    }

    .list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        /* cursor: pointer; */
    }

    .item {
        display: none;
    }
</style>
<script>
    var lis = document.querySelector(".list").querySelectorAll("li");
    var items = document.querySelector(".con").querySelectorAll(".item");
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("a", i)
        lis[i].onmouseover = function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = "current";
            var index = this.getAttribute("a");
            for (var j = 0; j < items.length; j++) {
                items[j].style.display = "none";
            }
            items[index].style.display = "block"
        }

    }
</script>